import React, { memo, useEffect, useState } from 'react'

export default memo(function App() {
  const [counter, setCounter] = useState(200)

  useEffect(() => {
    console.log('修改title')
  })

  // 一个函数式组件中，可以存在多个useEffect
  useEffect(() => {
    console.log('监听redux监听')

    // 返回值：回调函数 =》 组件被重新渲染或者组件卸载的时候执行
    return () => {
      console.log('取消监听redux监听')
    }
  })

  useEffect(() => {
    console.log('eventBus监听')
    return () => {
      console.log('eventBus取消监听')
    }
  })

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={(e) => setCounter(counter + 1)}>+1</button>
    </div>
  )
})
